<template>
  <PostCard
    :can-translate="false"
    :avater="avater"
    :name="name"
    :time="time"
    :post-message="message"
    :like-count="likeCount"
    :reply-count="replyCount"
    :dose-i-liked-it="doseILikedIt"
    @like-post="emit('like-reply')"
    @unlike-post="emit('unlike-reply')"
    @delete-post="emit('delete-reply')"
    @send-reply="emit('open-reply-modal')"
  >
    <p class="parent-comment-container" v-if="parentCommentMessage != undefined">
      回复：@{{parentCommentPosterName}}: {{parentCommentMessage}}
    </p>
  </PostCard>
</template>

<script lang="ts" setup>
import PostCard from '@components/public/PostCard.vue';

const emit = defineEmits(['delete-reply', 'like-reply', 'unlike-reply', 'open-reply-modal'])

defineProps({
  avater: {
    type: String,
  },
  name: {
    type: String
  },
  message: {
    type: String
  },
  time: {
    type: String,
  },
  likeCount: {
    type: Number
  },
  replyCount: {
    type: Number
  },
  doseILikedIt: {
    type: Boolean
  },
  parentCommentPosterName: {
    type: String
  },
  parentCommentMessage: {
    type: String
  }
})
</script>

<style scoped>
.parent-comment-container {
  white-space: nowrap; 
  overflow: hidden;
  width: 80%;
  text-overflow:ellipsis;
}
</style>